import { Ref } from 'vue'
import { ElLink, ElButton } from 'element-plus'
import { TableColumn } from '@/components/Table'
import { useI18n } from '@/hooks/web/useI18n'
import { calculateColumnWidth } from '@/utils'
import { usePermissionStoreWithOut } from '@/store/modules/permission'

export const useOrderPaymentTableColumns = (
  handleLink: Function,
  handleAudit: Function,
  useEnumeratePicker: Function,
  paymentMethodList: Ref<any[]>,
  orderStatusList: Ref<any[]>,
  statusList: Ref<any[]>,
  orderTypeList: Ref<any[]>,
  payTypeList: Ref<any[]>,
  currencyList: Ref<any[]>,
  transferTypeList: Ref<any[]>,
  creatorList: Ref<any[]>,
  dataList: Ref<any[]>,
  reviewPermission: Ref<boolean>
): TableColumn[] => {
  const { t } = useI18n()
  const permissionStore = usePermissionStoreWithOut()

  const hasPermission = (codes: string[]): boolean => {
    const roleRouterList = permissionStore.$state.addRouters || []
    const permission: string[] = []
    roleRouterList.forEach((item: any) => {
      if (Array.isArray(item.children)) {
        item.children.forEach((child: any) => {
          if (Array.isArray(child?.meta?.permission)) {
            permission.push(...child.meta.permission)
          }
          // 兼容第三级
          if (Array.isArray(child.children)) {
            child.children.forEach((g: any) => {
              if (Array.isArray(g?.meta?.permission)) {
                permission.push(...g.meta.permission)
              }
            })
          }
        })
      }
    })
    return permission.some((v) => codes.includes(v))
  }

  return [
    {
      field: 'id',
      label: t('expandCustomer.serialNumber'),
      width: 70,
      align: 'center',
      headerAlign: 'center'
    },
    {
      field: 'payment_method',
      label: t('orderPayment.paymentMethods'),
      width: 120,
      align: 'center',
      headerAlign: 'center',
      slots: {
        default: ({ row }) => useEnumeratePicker(paymentMethodList.value, row.payment_method)
      }
    },
    {
      field: 'voucher_code',
      label: t('orderPayment.transactionTicketNumber'),
      width: calculateColumnWidth(dataList.value, 'voucher_code'),
      align: 'center',
      headerAlign: 'center',
      showOverflowTooltip: true
    },
    {
      field: 'pay_time',
      label: t('orderPayment.paymentTime'),
      width: calculateColumnWidth(dataList.value, 'pay_time', 2, 4),
      align: 'center',
      headerAlign: 'center',
      showOverflowTooltip: true
    },
    {
      field: 'creator_name',
      label: t('common.creator'),
      width: calculateColumnWidth(dataList.value, 'creator_name'),
      align: 'center',
      headerAlign: 'center',
      showOverflowTooltip: true
    },
    {
      field: 'owner',
      label: t('order.owner'),
      width: 120,
      align: 'center',
      headerAlign: 'center',
      slots: {
        default: ({ row }) => useEnumeratePicker(creatorList.value, row.owner)
      }
    },
    {
      field: 'fee_type',
      label: t('orderPayment.feeType'),
      width: 120,
      align: 'center',
      headerAlign: 'center',
      slots: {
        default: ({ row }) => {
          switch (row.fee_type) {
            case 1:
              return '订单费用'
            case 2:
              return '物流费用'
            case 3:
              return '增补收入'
          }
        }
      }
    },
    {
      field: 'transfer_type',
      label: t('orderPayment.transferType'),
      width: 120,
      align: 'center',
      headerAlign: 'center',
      slots: {
        default: ({ row }) => useEnumeratePicker(transferTypeList.value, row.transfer_type)
      }
    },
    {
      field: 'total_amount',
      label: t('orderPayment.theAmountOfTheOrder'),
      width: calculateColumnWidth(dataList.value, 'total_amount'),
      align: 'center',
      headerAlign: 'center',
      showOverflowTooltip: true
    },
    {
      field: 'order_status',
      label: t('orderPayment.orderStatus'),
      width: calculateColumnWidth(dataList.value, 'order_status'),
      align: 'center',
      headerAlign: 'center',
      showOverflowTooltip: true,
      slots: {
        default: ({ row }) => useEnumeratePicker(orderStatusList.value, row.order_status)
      }
    },
    {
      field: 'paid_amount',
      label: t('orderPayment.theAmountOfThePayment'),
      width: calculateColumnWidth(dataList.value, 'paid_amount'),
      align: 'center',
      headerAlign: 'center',
      showOverflowTooltip: true
    },
    {
      field: 'pay_status',
      label: t('orderPayment.paymentStatus'),
      width: calculateColumnWidth(dataList.value, 'pay_status'),
      align: 'center',
      headerAlign: 'center',
      showOverflowTooltip: true,
      slots: {
        default: ({ row }) => useEnumeratePicker(statusList.value, row.pay_status)
      }
    },
    {
      field: 'order_no',
      label: t('orderPayment.orderCode'),
      align: 'center',
      headerAlign: 'center',
      showOverflowTooltip: true,
      width: 130,
      slots: {
        default: ({ row }) => (
          <ElLink underline={false} type="primary" onClick={() => handleLink('detail', row)}>
            {row.order_no}
          </ElLink>
        )
      }
    },
    {
      field: 'order_type',
      label: t('orderPayment.theTypeOfOrder'),
      width: calculateColumnWidth(dataList.value, 'order_type'),
      align: 'center',
      headerAlign: 'center',
      showOverflowTooltip: true,
      slots: {
        default: ({ row }) => useEnumeratePicker(orderTypeList.value, row.order_type)
      }
    },
    {
      field: 'user_name',
      label: t('orderPayment.user'),
      width: 160,
      align: 'center',
      headerAlign: 'center',
      showOverflowTooltip: true,
      slots: {
        default: ({ row }) => (
          <ElLink underline={false} type="primary" onClick={() => handleLink('customer', row)}>
            {row.user_name}
          </ElLink>
        )
      }
    },
    {
      field: 'pay_type',
      label: t('orderPayment.paymentType'),
      width: calculateColumnWidth(dataList.value, 'pay_type'),
      align: 'center',
      headerAlign: 'center',
      showOverflowTooltip: true,
      slots: {
        default: ({ row }) => useEnumeratePicker(payTypeList.value, row.pay_type)
      }
    },
    {
      field: 'pay_currency',
      label: t('orderPayment.currency'),
      width: calculateColumnWidth(dataList.value, 'pay_currency'),
      align: 'center',
      headerAlign: 'center',
      showOverflowTooltip: true,
      slots: {
        default: ({ row }) => useEnumeratePicker(currencyList.value, row.pay_currency)
      }
    },
    {
      field: 'notes',
      label: t('orderPayment.notes'),
      minWidth: 100,
      align: 'center',
      headerAlign: 'center',
      showOverflowTooltip: true
    },
    {
      field: 'remark',
      label: t('orderPayment.remark'),
      minWidth: 100,
      align: 'center',
      headerAlign: 'center',
      showOverflowTooltip: true
    },
    {
      field: 'actions',
      label: '操作',
      fixed: 'right',
      minWidth: 200,
      align: 'center',
      headerAlign: 'center',
      slots: {
        default: ({ row }) => {
          const nodes: any[] = []
          if (
            reviewPermission.value &&
            row.pay_status === '00' &&
            hasPermission(['OrderPaymentReview'])
          ) {
            nodes.push(
              <ElButton type="primary" size="small" onClick={() => handleAudit(row)}>
                {t('wholesalOrder.audit')}
              </ElButton>
            )
          }
          nodes.push(
            <ElButton type="success" size="small" onClick={() => handleLink('detail', row)}>
              {t('market.markSocialMediaAccount.detail')}
            </ElButton>
          )
          return <>{nodes}</>
        }
      }
    }
  ]
}
